<template>
	<view class="content">
		<u-navbar :is-back="false" title="购物车" title-color="white" :background="background"></u-navbar>
		<!-- 购物车 -->
		<view class="cart u-p-20">

			<view class="cart-item" :key="idx" v-for="(item ,idx) in cartList">
				<u-row gutter="1">
					<u-col span="1">
						<u-checkbox-group @change="valChange($event,item)">
							<u-checkbox v-model="item.checked" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</u-col>
					<u-col span="3">
						<!-- <u-image height="160upx"
						  :src="'https://pinhongoss.oss-cn-hangzhou.aliyuncs.com/'+item.goods_images"
						  width="160upx"
							:lazy-load="true" mode="scaleToFill" class="cart-item-cover"></u-image> -->


						<image height="160upx" :lazy-load="true" mode="scaleToFill" width="160upx"
							:src="'https://pinhongoss.oss-cn-hangzhou.aliyuncs.com/'+item.goods_images"
							class="cart-item-cover good-img"></image>

					</u-col>
					<u-col span="8">
						<view class="cart-info">
							<view class="goods-name">
								<text>{{item.goods_name}}</text>
							</view>
							<view class="">
								<!-- <u-tag text="醇黑巧克力【20枚】" mode="light" size="mini" type="info" /> -->
							</view>
							<u-row class="cart-footer">
								<u-col span="6">
									<text class="price">{{item.goods_price}}￥</text>
								</u-col>
								<u-col span="6" class="number-box">
									<u-number-box v-model="item.goods_count" @plus="setCount($event ,item)"
										@blur="setCount($event ,item)" @minus="setCount($event ,item)" :max="100">
									</u-number-box>
								</u-col>
							</u-row>

						</view>
					</u-col>
				</u-row>
			</view>
		</view>


		<!-- 底部框 -->
		<u-row gutter="16" class="cart-footer-tool" v-if="cartList.length>0">
			<u-col span="3" @click="clickAllCheck">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle">全选</u-checkbox>
				</u-checkbox-group>
			</u-col>
			<u-col span="9" style="text-align: right;">
				<view class="">
					<text>
						合计:
						<text>￥100</text>
					</text>
					<u-button @click="deleteCarts" type="error" size="mini" style="margin:0 30upx;">删除</u-button>
					<u-button type="error" size="mini" style="margin:0 30upx;">结算</u-button>
				</view>
			</u-col>
		</u-row>


		<u-empty v-else></u-empty>

	</view>
</template>

<script>
	import {
		getCartList,
		deleteCarts,
		setCartCount
	} from '@/api/cart.js'
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(42,132,255), rgb(234,175,200))'
				},
				checked: false,
				checked2: false,
				vArray: [],
				value: 1,
				cartList: [],
				selectIds: []
			};
		},
		onLoad() {
			this.getCartList();
		},
		methods: {
			clickAllCheck() {
				console.log('clickAllCheck', this.checked)
				if (this.checked) {
					this.setAllSelect(true)
				} else {
					this.setAllSelect(false)
				}
			},
			valChange(e, item) {
				console.log("e", e)
				console.log("item", item)
				this.$forceUpdate()
			},
			getCartList() {
				getCartList().then((res) => {
					this.cartList = res
					console.log('getCartList', res)
				})
			},
			setCount(e, item) {
				setCartCount({
					cartId: item.id, //购物车id
					num: item.goods_count
				}).then()
				console.log('当前值为 valChange2 : ', e)
				console.log('当前值为 valChange 2: item ', item)
			},
			setAllSelect(v) {
				this.cartList.map(item => {
					item.checked = v
				});
				this.cartList.push({});
				this.cartList.pop()
				console.log('setAllSelect--', JSON.stringify(this.cartList))
			},
			setSelectIds() {
				let arry = []
				this.cartList.map(item => {
					if (item.checked) {
						arry.push(item.id)
					}
				});
				this.selectIds = arry
				this.checked = arry.length == this.cartList.length
			},
			deleteCarts() {
				console.log('deleteCarts selectIds', this.selectIds)
				deleteCarts({
					cartIds: this.selectIds
				}).then(res => {
					this.getCartList()
					console.log('deleteCarts', res)
				})

			}
		},
		computed: {},
		watch: {
			cartList: {
				handler(nval, old) {
					this.setSelectIds()
					console.log(JSON.stringify(this.cartList))
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FDFDFD;
	}

	.cart {
		width: 100vw;
		background-color: #FFFFFF;

		.cart-item {
			width: 100%;
			height: 185upx;

			.u-col,
			.u-checkbox-group {
				height: 100%;
			}

			.cart-item-cover {
				border: 1upx solid #DBF1E1;
			}

			.good-img {
				height: 160upx;
				width: 160upx;
			}

			.cart-info {
				display: flex;
				flex-direction: column;
				align-items: left;
				justify-content: center;

				.goods-name {
					font-size: 20upx;
					margin-bottom: 10upx;
				}

				.cart-footer {
					margin-top: 10upx;

					.number-box {
						display: flex;
						flex-direction: column;
						align-items: right;
					}
				}
			}
		}
	}

	.cart-footer-tool {
		width: 100vw;
		height: 100upx;
		border: 1px solid #DCDFE6;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background: #DCDFE6;
	}
</style>
